<template>
    <div id="box_opening">
        <el-row>
            <el-col :span="24" style="height: 65px;padding-top: 12px;text-align: center;">
                <span style="font-size: 28px;color: rgb(24, 144, 255);">
                    已开标
                </span>
            </el-col>
            <el-col :span="6" >
                <span style="font-size: 14px;margin-bottom: 10px;">
                    招投标项目编号
                </span>
                <div class="sel_tj">
                    <el-input v-model="detaiList.projectNumber" placeholder="请输入招投标项目编号" @keyup.enter.native="handleQuery"/>
                </div>
            </el-col>
            <el-col :span="6" >
                <span style="font-size: 14px;">
                    项目名称
                </span>
                <div class="sel_tj">
                    <el-input v-model="detaiList.projectName" placeholder="请输入项目名称" @keyup.enter.native="handleQuery"/>
                </div>
            </el-col>
            <el-col :span="6" >
                <span style="font-size: 14px;">
                    供应商
                </span>
                <div class="sel_tj">
                    <el-input v-model="detaiList.supplierFullName" placeholder="请输入供应商名称" @keyup.enter.native="handleQuery"/>
                </div>
            </el-col>
            <el-col :span="24">
                <span style="font-size: 13px;font-weight: 700;">
                    开标明细
                </span>
                <div id="pingbiaoGz">
                    <el-table :data="selOPeningList || []" v-loading="txOpeing" @row-dblclick="dblclick" border>
                        <el-table-column label="招标项目编号" align="left" prop="projectNumber" width="180"/>
                        <el-table-column label="计划开标时间" align="left" width="180">
                            <template slot-scope="scope">
                                {{ formatDate(scope.row.plannedBidOpeningTime) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="开标标识" align="left" width="180">开标</el-table-column>
                        <el-table-column label="项目名称" align="left" prop="projectName" width="180"/>
                        <el-table-column label="中标供应商" align="left" prop="supplierFullName" width="180"/>
                        <el-table-column label="最终得分" align="left" prop="avgScore" width="150"/>
                        <el-table-column align="left" width="240"/>
                    </el-table>
                </div>
                <pagination
                    v-show="tableDataTotal > 0"
                    :total="tableDataTotal"
                    :page.sync="detaiList.pageNum"
                    :limit.sync="detaiList.pageSize"
                    @pagination="handleQuery"
                />
            </el-col>
            <el-col :span="24">
                <span style="font-size: 13px;font-weight: 700;">
                    评标明细
                </span>
                <div id="pingbiaoGz">
                    <el-table border :data="winningList" v-loading="txMx">
                        <el-table-column label="供应商" align="left" prop="supplierFullName" width="180"/>
                        <el-table-column label="招标项目编号" align="left" prop="supplierFullName" width="180"/>
                        <el-table-column label="开标标识" align="left" width="180">开标</el-table-column>
                        <el-table-column label="评标专家" align="left" prop="nick_name" width="180"/>
                        <el-table-column label="计划开标时间" align="left"  width="180">
                            <template slot-scope="scope">
                                {{ formatDate(scope.row.plannedBidOpeningTime) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="评标截至时间" align="left"  width="180">
                            <template slot-scope="scope">
                                {{ formatDate(scope.row.evaluationDeadline) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="标书" align="left"  width="90">
                            <template slot-scope="scope">
                                <img v-for="(item,index) in scope.row.documents" 
                                    style="width: 24px; height: 24px;margin-right: 10px;"
                                    :src="item.attachmentAddress+item.attachmentName" 
                                    @error="handleImageError"
                                    :title="item.attachmentName"
                                    :key="index"/>
                            </template>
                        </el-table-column>
                        <el-table-column label="评估项" align="left" prop="evaluation_item" width="150"/>
                        <el-table-column label="评分详情及标准" align="left" prop="score_details_and_standards" width="180"/>
                        <el-table-column label="最高分" align="left" prop="maximum_score" width="150"/>
                        <el-table-column label="投标内容概述" align="left" prop="bid_content_summary" width="180"/>
                        <el-table-column label="评分理由" align="left" prop="reason_for_rating" width="180"/>
                        <el-table-column label="得分" align="left" prop="must_score" width="150"/>
                    </el-table>
                </div>
                <pagination
                    v-show="winningTotal > 0"
                    :total="winningTotal"
                    :page.sync="winningDetailsList.pageNum"
                    :limit.sync="winningDetailsList.pageSize"
                    @pagination="winningQuery"
                />
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { selOpening,selOpeningDetails } from "@/api/bidding/opening";
import moment from 'moment';
export default {
    computed: {
        
    },
    data() {
        return{
            txMx:true,
            txOpeing:true,
            tableDataTotal: 0,
            detaiList: {
                pageNum: 1,
                pageSize: 10,
                supplierFullName:'',
                projectNumber:'',
                projectName:'',
            },
            winningDetailsList: {
                pageNum: 1,
                pageSize: 10,
                middleId: null,
            },

            selOPeningList:[],
            winningTotal: 0,
            winningList:[],
        }
    },
    created(){
        this.handleQuery();
    },
    methods:{
        handleQuery() {
            this.txMx = true;
            this.txOpeing =true,
            selOpening(this.detaiList).then(response=>{
                this.selOPeningList=response.rows;
                this.tableDataTotal = response.total;
                this.txOpeing =false;
                if(this.selOPeningList.length>0){
                    this.winningDetailsList.middleId = this.selOPeningList[0].middleId;
                    this.winningQuery();
                }else{
                    this.winningList = [];
                    this.winningTotal = 0;
                    this.txMx = false;
                }
                
            });
        },
        dblclick(row, column, event){
            console.log("row",row);
            console.log("column",column);
            console.log("event",event);
            this.winningDetailsList.middleId = row.middleId;
            this.txMx = true;
            this.winningQuery();
        },
        winningQuery(){
            this.txMx = true;
            selOpeningDetails(this.winningDetailsList).then(data=>{
                this.winningList = data.rows;
                this.winningTotal = data.total;
                this.txMx = false;
            })
        },
        formatDate(str) {
            return moment(str).format('YYYY-MM-DD HH:mm:ss');
        },
        handleImageError(event){
            event.target.src = "http://8.130.88.144:9000/xinghai/lala.jpg";
        },
    }
}
</script>

<style scoped>
#box_opening{
    width: 100%;
    height: 100%;
    background-color: #F5F6F8;
    padding: 10px;
}
#box_opening >>> .el-col-24{
    background-color: #FFFFFF;
    box-shadow: 0 2px 6px 0 rgba(84,48,132,.1);
    margin: 4px 0;
    padding: 10px;
}
/* #box_opening >>> .el-input--medium{
    margin-top: 10px;
} */
.sel_tj{
    margin-top: 10px;
}
#box_opening >>> .el-col-6{
    background-color: #FFFFFF;
    box-shadow: 0 2px 6px 0 rgba(84,48,132,.1);
    margin: 4px 0;
    padding: 10px;
    margin-right: 10px;
}
#pingbiaoGz{
    margin-top: 10px;
}
#pingbiaoGz >>> .el-input{
    margin-left: -4px;
    width: 289px;
}
#pingbiaoGz >>> .el-input--medium .el-input__inner{
    margin: 4px 0;
    height: 30px;
    line-height: 30px;
}
#pingbiaoGz >>> .el-table .cell{
    font-size: 13px;
}
#pingbiaoGz >>>.el-table .el-table__header-wrapper th, >>> .el-table .el-table__fixed-header-wrapper th{
    height: 30px;
}
</style>
